<template>
  <div class="slidedow">
    <el-carousel :interval="4000" type="card" height="320px" pause-on-hover>
      <el-carousel-item v-for="(item, index) in data" :key="index">
        <img :src="QNURL + item.img" alt="" />
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, toRefs } from "vue";
import { QNURL } from "@/config/urlConfig";

const prop = defineProps({
  data: {
    type: Array as () => Array<any>,
    default: () => []
  }
});

const { data } = toRefs(prop);

const list = ref([
  { image: "", position: 0 },
  { image: "", position: 800 },
  { image: "", position: 1600 },
  { image: "", position: 2400 },
  { image: "", position: 3200 }
]);

onMounted(() => {
  // setInterval(() => {
  list.value = list.value.map(item => {
    item.position -= 800;

    return item;
  });
  // }, 1000);
});
</script>

<style scoped lang="scss">
.slidedow {
  width: 100%;

  img {
    width: 100%;
    height: 100%;
  }

  &:deep(.el-carousel) {
    .el-carousel__mask {
      background-color: #000 !important;
    }

    .el-carousel__item {
      border-radius: 10px;
    }

    .el-carousel__button {
      width: 10px;
      height: 10px;
      border-radius: 50%;
    }

    // .is-in-stage {
    //   width: 50%;
    // }

    .is-active {
      .el-carousel__button {
        width: 30px;
        border-radius: 10px;
      }
    }
  }
}
</style>
